<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
	{
	style: {
	navigationBarTitleText: '我的参与',
	enablePullDownRefresh: false,
	},
	}
</route>
<template>
	<view>
		<wd-tabs v-model="state.curTab" @change="handleChange">
			<block v-for="(item, index) in state.tabList" :data="item" :key="index">
				<wd-tab :title="item.name">

				</wd-tab>
			</block>
		</wd-tabs>

		<k-list :loading="loading" :is-empty="!articleComment.length">
			<view>
				<view class="py-4 mx-4 border-b border-b-solid border-[#EDEDED]" v-for="item in articleComment" :key="item.id">
					<view class="flex items-center">
						<wd-img :src="item.avatar" width="34rpx" height="34rpx" :round="true" />
						<text class="text-base ml-[10rpx] text-[26rpx]">{{ item.nickname }}</text>
						<text class="ml-[20rpx] text-[#9A9A9A]" v-if="item.status == 1">评论你的贴子 </text>
						<text class="ml-[20rpx] text-[#9A9A9A]" v-if="item.status == 2">点赞了你的帖子</text>
					</view>
					<view class="mt-1 text-[26rpx]">
						<text class="text-[#9A9A9A]">评论：</text>
						<text class="text-base">{{ item.comment }}</text>
					</view>
					<view v-if="item.article" class="bg-[#F4F4F4] rounded-sm p-[10rpx] flex mt-4 mb-2"
						@click="to(`pages-sub/post/post-detail?id=${item.article.id}`)">
						<wd-img width="132rpx" height="132rpx" :src="item.article.image[0]"></wd-img>
						<text class="text-base ml-[20rpx] font-bold text-[26rpx]">
							{{ item.article.title }}
						</text>
					</view>
					<view class="text-[#9A9A9A] text-xs">{{ item.create_time }}</view>
				</view>
			</view>
		</k-list>
	</view>
</template>

<script setup>
import {
	to
} from "@/utils/navigation";
import {
	articleCommentList
} from "@/service/article";
import useReachBottomLoadMore from "@/hooks/useReachBottomLoadMore"
defineOptions({
	options: {
		styleIsolation: 'shared',
	}
});


const state = ref({
	curTab: 0,
	tabList: [{
		name: '我收到的',
		value: 1,
	},
	{
		name: '我发出的',
		value: 2,
	},
	],
})

const requestParams = computed(() => {
	const {
		curTab,
		tabList
	} = state.value;
	return {
		type: tabList[curTab].value
	}
})

const {
	data: articleComment,
	loading,
	refresh
} = useReachBottomLoadMore(articleCommentList, requestParams, "list");
function handleChange() {
	// refresh(requestParams.value);
}
onLoad(() => {
	refresh();
})
</script>

<style lang="scss" scoped></style>